<template>
  <div style="background: #f8f8f8; min-height: calc(100vh - 200px)">
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')">首页</a-breadcrumb-item>
<!--        <a-breadcrumb-item href="" > 就业服务 </a-breadcrumb-item>-->
        <a-breadcrumb-item href="" @click.native="$router.push('/education/educationHome')"> 教育培训 </a-breadcrumb-item>
        <a-breadcrumb-item href="" @click.native="$router.push('/education/mechanismList')"> 培训机构 </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #FFBE37">公司详情</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="top">
      <div class="toLeft">
        <div class="cOicon-id" style="align-items: inherit">
          <div class="image1">
            <img :src="imageWebUrl+romData.logo" alt="" />
          </div>
          <div>
            <span class="x5TXt" style="width: 650px; margin-top: 12px">
              {{romData.name}}</span
            >

            <span
              class="titleTxt5"
              style="width: 650px; margin-top: 19px; color: #666666"
              >邮箱：{{romData.email}}</span
            >
          </div>
        </div>
        <div><p style="margin-top: 17px" class="titleTxt5">公司介绍</p></div>
        <div style="width: 800px; margin-top: 10px">
          <p class="titleTxt5">
            {{romData.comDesc}}
          </p>
        </div>
      </div>
      <div class="toRight">
        <div class="dlex1-div" style="margin-top: 84px">
          <div class="yellowBar"></div>
          <span class="titleTxt1" style="font-size: 15px">公司地址</span>
        </div>
        <p
          class="titleTxt5"
          style="color: #666666; line-height: 21px; margin-top: 8px"
        >
          {{romData.address}}
        </p>
        <div class="image2">
          <img src="@/assets/image/mapData.png" alt="" />
        </div>
      </div>
    </div>
    <div class="conder">
      <div style="display: flex; align-items: baseline; margin-bottom: 19px">
        <div class="yellowBar"></div>
        <span style="font-weight: 600" class="titleTxt1">职业培训</span>
      </div>
      <!-- 职位展示区域 -->
      <div class="coRsingleCF">
        <div class="listDiv" v-for="(item,list) in trainList" :key="list">
          <span class="titleTxt1">
            关于培训活动名称活动名称关于培活动名关于培训活动名称活动名称关于培活动名
          </span>
          <span class="timeTxt1" style="margin-top: 16px"
            >培训时间：2021.10.23 - 11.11</span
          >
          <div class="cOicon-id" style="margin-top: 24px">
            <img class="imgagesTre" src="@/assets/image/icon6.png" alt="" />
            <p>深圳市腾讯科技有限公司</p>
          </div>
        </div>
      </div>
       <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 0 auto; margin: 68px"
        v-if="trainList.length < 1"
      />
    </div>
    <div class="cnBottom"  v-if="trainList.length > 1">
      <div style="margin: 0 auto; width: 230px">
        <a-button v-if="btnState == 1" @click="more()" class="sobtn"
          >点击加载更多</a-button
        >
        <span class="timeTxt1" v-if="btnState == 3">没有更多了</span>
        <a-button v-if="btnState == 2" class="sobtn">加载中</a-button>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>
<script>
export default {
  data() {
    return {
       // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      // 获取id
      orgId: this.$route.query.id,
      msgons: "",
      btnState: 1,
      // 主要数据
      romData: {},
      // 页码
      pageSize:1,
       //城市-省
      provinceSelname:'',
      // 企业编码
      comCode:'',
      //
      trainList:[],
      onLoading:false
    };
  },
  methods: {
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageSize++;
      this.professional();
    },
    // 职业培训 - 列表
    professional() {
      this.onLoading = true
      let ber = [];
      this.$ajax({
        url: "/educational/traininginfo/list/professional",
        method: "post",
        params: {
          trainName: '', //培训名称
          province: this.provinceSelname, //城市-省
          pageSize: 12, //分页开区间开大闭小
          pageIndex: this.pageSize, //分页闭区间
          comCode:this.orgId,//企业编码
        },
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false
          ber = res.data.list;
          for (var i in ber) {
            this.trainList.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.onLoading = false
          this.trainList = [];
          this.btnState = 3;
        }
      });
    },
    // 查询详情
    getSelpc(e) {
      this.$ajax({
        url: "entrepreneurial/cominfo/get",
        method: "post",
        params: {
          comCode: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.romData = res.data;
          // console.log(this.provinceList);
        } else {
          this.romData = {};
          return false;
        }
      });
    },
  },
  mounted() {
    this.getSelpc(this.orgId);
    this.professional();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
//  自己写
.top {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  background-color: #ffffff;
  padding: 25px 20px;
  .image1 {
    width: 100px;
    height: 100px;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .toRight {
    margin-left: 131px;
    .image2 {
      width: 175px;
      height: 115px;
      margin-top: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// 中间部分样式
.conder {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  .listDiv {
    width: 386px;
    height: 153px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    padding: 20px;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    transition: all ease 1s;
  }
  .listDiv:nth-child(3n-2) {
    margin-left: 0px;
  }
  .listDiv:hover {
    -webkit-box-shadow: 0 5px 12px 0 rgb(124 124 124 / 30%);
    -moz-box-shadow: 0 10px 24px 0 rgb(204, 35, 35);
    box-shadow: 0 8px 8px 0 #cecece;
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
    // transition:  all 1s;
  }
}
.cnBottom {
  width: 100%;
  margin-top: 60px;
  padding-bottom: 70px;
}
</style>
